<template>
  <div class="content-box">
    <div class="question" v-if="!isOver">
      <div class="title">{{item.title}}</div>
      <div class="main-img" v-if="item.id === 1">
        <img src="../assets/images/chanel.png" alt>
      </div>
      <div
        class="option"
        :class="['option'+item.id,{center: item.id===1}]"
        v-for="(option, idx) in item.options"
        :key="idx"
      >
        <div
          class="select-btn"
          :class="[{active: answers['answer'+item.id] && answers['answer'+item.id].indexOf(option.option) > -1}]"
          @click="select(item.id, option.option)"
        ></div>
        <div
          class="text"
          :class="{active: answers['answer'+item.id] && answers['answer'+item.id].indexOf(option.option) > -1}"
          @click="select(item.id, option.option)"
          v-html="option.text"
        ></div>
      </div>
      <div
        class="submit"
        v-if="!answers['answer'+item.id] || answers['answer'+item.id].length === 0"
      >继续</div>
      <div
        class="submit active"
        @click="goOn"
        v-if="answers['answer'+item.id] && answers['answer'+item.id].length"
      >继续</div>
    </div>
    <div class="mobile" v-else>
      <div class="content">
        <div class="box">
          <div class="title">请输入您的手机号，完成提交</div>
          <div class="form-group">
            <div class="form-input">
              <!-- <input
                :class="{err:errText}"
                onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
                type="number"
                maxlength="11"
                :placeholder="placeholder"
                v-model="mobile"
                @focus="focus"
                @blur="blur"
              >-->
              <input
                type="text"
                :class="{err:errText}"
                v-model="mobile"
                :placeholder="placeholder"
                @focus="focus"
                @blur="blur"
              >
            </div>
            <div class="label" v-if="!valid">{{errText}}</div>
          </div>
        </div>
      </div>
      <div class="submit active" :class="{disabled: disabled}" v-if="valid" @click="submit">点击提交</div>
      <div class="submit" v-else>点击提交</div>
    </div>
  </div>
</template>
<script>
import QuesJson from "@/assets/json/question";
import { mapState, mapMutations } from "vuex";
import { MobileMixin } from "@/assets/js/mixin";
import { getInfo, submitInfo } from "@/assets/js/api";

import scroll from "scroll";
import page from "scroll-doc";
import ease from "ease-component";

import FastClick from "fastclick";

export default {
  name: "question",
  mixins: [MobileMixin],
  data() {
    return {
      answerList: []
    };
  },
  computed: {
    ...mapState({
      current: state => state.current,
      answers: state => state.answers,
      isOver: state => state.isOver
    }),
    item() {
      return QuesJson[this.current];
    }
  },
  mounted() {
    this.answerList = this.answers["answer" + (this.current + 1)];
    getInfo();
    // this.fastClickRegister();
    this.setHeight();
  },
  methods: {
    ...mapMutations({
      changeCurrent: "changeCurrent",
      changeAnswers: "changeAnswers",
      changeOver: "changeOver",
      changeListen: "changeListen"
    }),
    goOn() {
      if (this.current === 0 && this.answerList[0] === 2) {
        //选择no直接跳转/thank
        const datas = {
          surveyInfo: [
            {
              surveyId: 1,
              questionId: 1,
              optionIds: [2]
            }
          ]
        };
        submitInfo(datas);
        this.changeListen();
        setTimeout(() => {
          this.$router.push("/thank");
        });
      } else {
        if (this.current < 2) {
          window.scrollTo(0, 0);
          let current = this.current + 1;
          this.answerList = [];
          this.changeCurrent(current);
          this.setHeight();
        } else {
          this.changeOver();
          const datas = {
            surveyInfo: [
              {
                surveyId: 1,
                questionId: 1,
                optionIds: this.answers.answer1
              },
              {
                surveyId: 1,
                questionId: 2,
                optionIds: this.answers.answer2.sort()
              },
              {
                surveyId: 1,
                questionId: 3,
                optionIds: this.answers.answer3.sort()
              }
            ]
          };
          submitInfo(datas);
          document.body.style.height = "100%";
        }
      }
    },
    select(id, option) {
      console.log(id);
      if (id === 1) {
        let height = document.querySelector(".question").clientHeight;
        let avaih = window.innerHeight;
        let h = height - avaih - 24;
        console.log(height);
        console.log({ h: window.innerHeight });
        let heightDiff = height - avaih;
        if (heightDiff > 48) {
          scroll.top(
            page(),
            h,
            { ease: ease.linear, duration: 200 },
            function() {}
          );
        }
      }
      if (this.answerList.length === 0) {
        this.answerList.push(option);
      } else {
        let index = this.answerList.indexOf(option);
        if (index > -1) {
          this.answerList.splice(index, 1);
        } else {
          if (id === 1 || (id === 3 && option === 22)) {
            this.answerList = [option];
          } else {
            if (id === 3 && option != 22) {
              let index = this.answerList.indexOf(22);
              if (index > -1) {
                this.answerList.splice(index, 1);
              }
            }
            this.answerList.push(option);
          }
        }
      }
      this.changeAnswers({ id, answer: this.answerList });
    },
    setHeight() {
      setTimeout(() => {
        let h1 =
          document.querySelector(".question") &&
          document.querySelector(".question").clientHeight;
        let h2 = "100%";
        console.log(h2);
        document.body.style.height = h1 + "px" || h2;
      }, 50);
    },
    fastClickRegister() {
      FastClick.attach(document.querySelector(".select-btn"));
      let btns = document.querySelectorAll(".select-btn");
      if (btns) {
        for (let i = 0; i < btns.length; i++) {
          FastClick.attach(btns[i]);
        }
      }

      FastClick.attach(document.querySelector(".text"));
      let texts = document.querySelectorAll(".text");
      if (texts) {
        for (let i = 0; i < texts.length; i++) {
          FastClick.attach(texts[i]);
        }
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.content-box {
  width: 100%;
  height: 100%;
  // overflow: scroll;
}

.question {
  padding-top: 36px;
  padding-bottom: 48px;

  .main-img {
    width: 231px;
    margin: 0 auto;
  }

  .title {
    font-size: 16px;
    margin-bottom: 32px;
    font-family: PingFangSC-Medium, 'PingFangM';
  }

  .submit {
    background: #c1c1c1;
    color: #fff;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    margin-top: 36px;

    &.active {
      background: #000;
    }
  }

  .option {
    font-size: 14px;
    color: #666;
    margin-top: 28px;
    display: flex;
    // justify-content: center;
    align-items: center;

    .select-btn {
      flex: 0 0 24px;
      height: 24px;
      margin-right: 16px;
      position: relative;
      // top: 2px;
      background-image: url('../assets/images/oval.png');
      background-repeat: no-repeat;
      background-size: 100%;

      &.active {
        background-image: url('../assets/images/select.jpg');
      }
    }

    &.option1 {
      .select-btn {
        &.active {
          background-image: url('../assets/images/selected.png');
        }
      }
    }

    .text {
      // flex: 1;
      // white-space: nowrap;
      &.active {
        color: #000;
      }
    }

    &.center {
      align-items: center;

      .select-btn {
        top: 0;
      }
    }
  }
}

.mobile {
  width: 327px;
  height: 100%;
  padding-bottom: 48px;
  margin: 0 auto;
  box-sizing: border-box;

  .submit {
    background: #c1c1c1;
    color: #fff;
    width: 327px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;

    &.active {
      background: #000;
    }

    &.disabled {
      pointer-events: none;
    }
  }

  .content {
    height: calc(100% - 48px);
    display: flex;
    justify-content: center;
    align-items: center;

    .box {
      width: 327px;
      height: 110px;
    }

    .title {
      font-size: 18px;
      line-height: 18px;
      margin-bottom: 24px;
      text-align: center;
    }

    .form-group {
      .form-input {
        input {
          display: block;
          width: 100%;
          height: 44px;
          border: 1px solid #d6d6d6;
          box-sizing: border-box;
          padding: 0 12px;
          font-size: 14px;

          &:focus {
            border-color: #000;
          }

          &.err {
            border-color: red;
          }
        }
      }

      .label {
        font-size: 12px;
        line-height: 12px;
        margin-top: 12px;
        color: red;
      }
    }
  }
}
</style>
